<template>
	<view class="groundDetails">
		<view class="carousel_box" v-if="curCalIdx==0">
			<Carousel :val="videoObj"></Carousel>
		</view>
		<view class="carousel_box" v-if="curCalIdx==1">
			<Carousel :val="bannerObj"></Carousel>
		</view>
		<view class="content_box">
			<view class="change_carousel_box">
				<view :class="['change_type',index==curCalIdx?'activeCal':'']"
					v-for="(item,index) in carousel_type_list" :key="item.name" @tap="changeCarousel(index)">
					{{item.name}}
				</view>
			</view>
			<view class="groundContent">
				<view class="groundName">
					{{detailsObj.name}}
				</view>
				<view class="groundDesc">
					{{detailsObj.desc}}
				</view>
				<view class="groundPrice">
					<text class="fn-sz-22">￥</text> <text class="fn-sz-30"> {{detailsObj.price}}</text>
				</view>
			</view>
			<view class="ground_store_box">
				<view class="ground_left_box">
					<view class="ground_store_image">
						<image :src="detailsObj.farm_info.image" mode=""></image>
					</view>
					<view class="ground_store_info">
						<view class="ground_store_name">
							{{detailsObj.farm_info.name}}
						</view>
						<view class="ground_store_address">
							{{detailsObj.farm_info.area}}
							{{detailsObj.farm_info.address}}
						</view>
					</view>
				</view>
				<view class="ground_right_box" @tap="goStoreDetails">
					<view>
						查看
					</view>
					<image class="icon-26" src="../../static/images/icon/icon_moer_btn.png" mode=""></image>
				</view>
			</view>
			<view class="ground_type_box">
				<view class="area-title">
					土地类型
				</view>
				<scroll-view scroll-x scroll-with-animation class="ground_type_scroll_box">
					<view class="ground_type_list">
						<view :class="['ground_type_item',item.id==curGroundId.id?'activeGroundType':'']"
							v-for="item in detailsObj.option" :key="item.id" @tap="changeOption(item)">
							<view class="ground_area">
								{{item.area}} m²
							</view>
							<view class="ground_type_name">
								{{item.option_name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="rent_box">
					<view class="s_line_box">
						<view class="s_title_box">
							租聘时长
						</view>
						<view class="s_content_box" @tap="rentTimeshow=true">
							<view>
								{{curRentObj.label}}
							</view>
							<image class="icon-28 mar-left-6" src="../../static/images/icon/icon_moer_btn.png" mode="">
							</image>
						</view>
					</view>
					<view class="s_line_box">
						<view class="s_title_box">
							服务类型
						</view>
						<view class="s_content_box" @tap="rentTypeshow=true">
							<view>
								{{curRentTypeObj.desc}}（￥{{curRentTypeObj.price}}/天）
							</view>
							<image class="icon-28 mar-left-6" src="../../static/images/icon/icon_moer_btn.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="seed_choose_box">
				<view class="seed_top_box">
					<view class="area-title">
						种子选择
					</view>
					<view class="area_num_box">
						{{seedTotal}}m²/{{curGroundId.area}}m²
					</view>
				</view>
				<view class="seed_list_box">
					<view class="seed_item" v-for="item in seed_type_list" :key="item.name">
						<view class="seed_left_box">
							<view class="seed_image">
								<image :src="item.cover" mode=""></image>
							</view>
							<view class="seed_info_box">
								<view class="seed_name">
									{{item.name}}
								</view>
								<view class="seed_info_desc">
									{{item.start_area}}m²起种 预估产量{{item.pre_yield}}kg/m²
								</view>
							</view>
						</view>
						<view class="seed_right_op">
							<image class="icon-40" src="../../static/images/icon/icon_del_btn.png" mode=""
								@tap="countFunc(item,false)"></image>
							<view class="num_box">{{ item.num }}</view>
							<image class="icon-40" src="../../static/images/icon/icon_add_btn.png" mode=""
								@tap="countFunc(item,true)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="ground_data">
				<view class="area-title">
					土地实时数据
				</view>
				<view class="ground_data_desc">
					<view class="ground_data_s_box" v-for="item in detailsObj.current_data" :key="item.name">
						<view class="ground_data_s_title">
							{{item.name}}
						</view>
						<view class="ground_data_s_text">
							{{item.desc}}
						</view>
					</view>

				</view>
			</view>
			<view class="gound_desc_box">
				<view class="area-title">
					土地详情
				</view>
				<view class="rich_text_box">
					<u-parse :content="detailsObj.content"></u-parse>
				</view>
			</view>
		</view>
		<view class="bottom_op_box">
			<button class="add_car_btn" @tap="callPhone">联系商家</button>
			<button class="buy_now" @tap="buyNow">立即认养</button>
		</view>
		<u-picker @cancel="rentTimeshow=false" :show="rentTimeshow" :columns="rentColumns" keyName="label"
			@confirm="comfirmRentTime"></u-picker>
		<u-picker @cancel="rentTypeshow=false" :show="rentTypeshow" :columns="rentTypeColumns" keyName="desc"
			@confirm="comfirmRentType"></u-picker>
	</view>
</template>

<script>
	import Carousel from '../../components/carousel/Carousel.vue';
	export default {
		components: {
			Carousel,
		},
		data() {
			return {
				bannerObj: {
					list: [],
					height: '750rpx',
					radius: '0rpx'
				},
				videoObj: {
					list: [],
					height: '750rpx',
					radius: '0rpx'
				},
				curCalIdx: 0,
				carousel_type_list: [{
						name: '视频'
					},
					{
						name: '图片'
					},
					// {
					// 	name: '监控'
					// },
				],
				curGroundId: {},

				seed_type_list: [],
				product_id: '',
				detailsObj: {},
				rentTimeshow: false,
				rentColumns: [
					[{
							label: '一年(365天)',
							value: 'year',
							num: 365
						},
						{
							label: '半年(180天)',
							value: 'half_year',
							num: 180
						},
					]
				],
				curRentObj: {
					label: '一年(365天)',
					value: 'year',
					num: 365
				},
				rentTypeshow: false,
				rentTypeColumns: [],
				curRentTypeObj: {

				}
			};
		},
		onLoad(val) {
			if (val.id) {
				this.product_id = val.id;
				this.getGroProductDetail();
			}
		},
		methods: {
			changeCarousel(val) {
				this.curCalIdx = val;
			},
			countFunc(val, num) {
				if (num) {
					if (this.seedTotal >= this.curGroundId.area) {
						this.$helper.toast('超出种植面积');
					} else {
						if (val.num == 0) {
							let tmpTotal = this.seedTotal + val.start_area;
							if (tmpTotal > this.curGroundId.area) {
								this.$helper.toast('超出种植面积');
							} else {
								val.num += val.start_area
							}
						} else {
							val.num += 1;
						}
					}
				} else {
					if (val.num >= 1) {
						if (val.num == val.start_area) {
							val.num -= val.start_area
						} else {
							val.num -= 1;
						}
					}
				}
			},
			getGroProductDetail() {
				this.$api.getGroProductDetail({
					product_id: this.product_id
				}).then(res => {
					if (res.code == 1) {
						this.detailsObj = res.data;
						this.videoObj.list = [{
							image: this.detailsObj.video
						}];
						this.bannerObj.list = this.detailsObj.images;
						this.curGroundId = this.detailsObj.option[0];
						this.curRentTypeObj = this.detailsObj.service_json[0];
						this.rentTypeColumns = [this.detailsObj.service_json];
						this.seed_type_list = this.detailsObj.farm_seed.map(item => {
							this.$set(item, 'num', 0);
							return item;
						})
					}
				})
			},
			changeOption(val) {
				this.curGroundId = val;
			},
			comfirmRentTime(val) {
				console.log(val, 'faga');
				this.curRentObj = val.value[0];
				this.rentTimeshow = false;
			},
			comfirmRentType(val) {
				this.curRentTypeObj = val.value[0];
				this.rentTypeshow = false;
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detailsObj.farm_info.phone
				})
			},
			buyNow() {
				let params = {
					product_id: this.detailsObj.id,
					option_id: this.curGroundId.id,
					day_type: this.curRentObj.value,
					service_type: this.curRentTypeObj.type,
				}
				let farm_seed = '';
				this.seed_type_list.forEach((item => {
					let str = '';
					if (item.num != 0) {
						str = `${item.id}_${item.num}`
						if (farm_seed.length) {
							farm_seed = farm_seed + ',' + str;
						} else {
							farm_seed = str;
						}
					}
				}))
				params.farm_seed = farm_seed;
				this.$api.buyItNow(params).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: `/pages/groundPage/orderSubmit?params=${JSON.stringify(params)}&resData=${JSON.stringify(res.data)}`
						})
					} else {
						this.$helper.toast(res.msg);
					}
				})

			},
			goStoreDetails() {
				uni.navigateTo({
					url: `/pages/groundPage/storeDetails?info=${JSON.stringify(this.detailsObj.farm_info)}`
				})
			}
		},
		computed: {
			seedTotal() {
				return this.seed_type_list.reduce((pre, cur) => {
					return pre + cur.num
				}, 0)
			}
		}
	}
</script>

<style lang="scss">
	.groundDetails {
		.carousel_box {
			margin-bottom: 23rpx;
		}

		.content_box {
			background: #F9F9F9;
			padding: 23rpx 24rpx 200rpx;

			.change_carousel_box {
				width: fit-content;
				height: 57rpx;
				background: #FFFFFF;
				border-radius: 29rpx;
				border: 1px solid #CCCCCC;
				display: flex;
				align-items: center;
				margin: 0 auto 30rpx;

				.change_type {
					width: 100rpx;
					height: 57rpx;
					border-radius: 29rpx;
					text-align: center;
					line-height: 57rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.activeCal {
					background: #FED100;
				}
			}

			.groundContent {
				padding: 24rpx 28rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.groundName {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 15rpx;
				}

				.groundDesc {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 20rpx;
				}

				.groundPrice {
					font-weight: 400;
					color: #F34035;
				}
			}

			.ground_store_box {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 22rpx;
				justify-content: space-between;

				.ground_left_box {
					display: flex;

					.ground_store_image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 10rpx;
						overflow: hidden;
						flex: none;
						margin-right: 15rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.ground_store_info {
						.ground_store_name {
							font-size: 30rpx;
							color: #222222;
							margin-bottom: 11rpx;
						}

						.ground_store_address {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.ground_right_box {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #999999;

					image {
						margin-left: 6rpx;
					}
				}
			}

			.ground_type_box {

				.ground_type_scroll_box {
					position: relative;
					width: 100%;
					height: 200rpx;
					overflow: hidden;
					box-sizing: border-box;
					margin-bottom: 30rpx;

					.ground_type_list {
						display: flex;

						.ground_type_item {
							width: 150rpx;
							height: 200rpx;
							flex: none;
							background: #FFFFFF;
							border-radius: 20rpx;
							border: 1rpx solid #CCCCCC;
							text-align: center;
							box-sizing: border-box;
							padding-top: 48rpx;
							margin-right: 20rpx;

							.ground_area {
								font-size: 30rpx;
								color: #333333;
								margin-bottom: 10rpx;
							}

							.ground_type_name {
								font-size: 24rpx;
								color: #666666;
							}
						}

						.activeGroundType {
							background: #FED100;
						}
					}
				}

				.rent_box {
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 28rpx 23rpx;
					margin-bottom: 30rpx;

					.s_line_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 37rpx;

						&:nth-of-type(2) {
							margin-bottom: 0;
						}

						.s_title_box {
							font-size: 28rpx;
							color: #999999;
						}

						.s_content_box {
							font-size: 28rpx;
							color: #333333;
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.seed_choose_box {
				margin-bottom: 30rpx;

				.seed_top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.area_num_box {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.seed_list_box {
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 20rpx 22rpx;

					.seed_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 40rpx;

						:nth-last-of-type(1) {
							margin-bottom: 0;
						}

						.seed_left_box {
							display: flex;

							.seed_image {
								width: 90rpx;
								height: 90rpx;
								border-radius: 12rpx;
								overflow: hidden;
								margin-right: 15rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.seed_info_box {
								.seed_name {
									font-size: 30rpx;
									color: #222222;
									margin-bottom: 11rpx;
								}

								.seed_info_desc {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
								}
							}

						}

						.seed_right_op {
							display: flex;
							align-items: center;
							margin-left: 30rpx;

							.num_box {
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
							}
						}
					}
				}

			}

			.ground_data {
				margin-bottom: 30rpx;

				.ground_data_desc {
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 28rpx;
					display: flex;
					flex-wrap: wrap;

					.ground_data_s_box {
						display: flex;
						width: 50%;

						.ground_data_s_title {
							width: 110rpx;
							font-size: 28rpx;
							color: #999999;
							margin-right: 20rpx;
						}

						.ground_data_s_text {
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}

		}

		.bottom_op_box {
			display: flex;
			position: relative;
			width: 100vw;
			align-items: center;
			background: #ffffff;
			justify-content: space-between;
			padding: 19rpx 23rpx;
			position: fixed;
			box-sizing: border-box;
			bottom: 0;

			.add_car_btn {
				width: 230rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 40rpx;
				border: 2rpx solid #cccccc;
				color: #333333;
				font-size: 30rpx;
			}

			.buy_now {
				width: 430rpx;
				height: 80rpx;
				background: #fed100;
				border-radius: 40rpx;
				font-size: 30rpx;
			}
		}
	}
</style>